import React, { Component } from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';
import util from "@/common/util"
import layer from '@/common/layer'
import SelView from '@/components/sel'
import RadioPicker from '@/components/RadioPicker1'
import RadioPicker1 from '@/components/RadioPicker1'

import Picker from '@/components/picker'

class Declaration extends Component {
    constructor(props) {
        super()
        this.valids = [
            { // professional  个人信息
                key: 'name',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "姓名不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            {
                key: 'age',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "年龄不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            {
                key: 'tellphone',
                func(str) {
                    if (str.length !== 11) {
                        layer.open({
                            content: "手机号码格式错误",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            {   // credit  信用卡信息
                key: 'creditlimit',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "信用卡总额度不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            {
                key: 'creditnum',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "信用卡数量不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            {   // insurance  保单信息
                key: 'insurancelimit',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "报单保额不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            {
                key: 'insurancecompany',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "保险公司不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            {
                key: 'insurancenum',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "保单号不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            {
                key: 'insurancenperson',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "投保人不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            {   // operate  经营信息
                key: 'operatecopname',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "经营信息公司名称不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            {
                key: 'operatebank',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "每月银行流水不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            { //job
                key: 'monthsalary',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "每月收入不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            { //house
                key: 'houseaddress',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "房屋地址不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            {
                key: 'houseworth',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "房屋价值不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            {
                key: 'housearea',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "房屋面积不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            {
                key: 'houseMortgageMoney',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "房屋抵押金额不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            {// car
                key: 'carnum',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "车牌号不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            {
                key: 'carbrand',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "车辆品牌不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            {
                key: 'caryear',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "车辆年限不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            {
                key: 'carkilomet',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "车辆公里数不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
            {
                key: 'carprice',
                func(str) {
                    if (str.length === 0) {
                        layer.open({
                            content: "车辆价格不能为空",
                            btn: "好的"
                        })
                        return false
                    }
                    return true
                }
            },
        ]
        this.state = {
            // professional  个人信息
            name: '',
            age: '',
            tellphone: '',
            merryTypeGroups: [{ value: 0, label: '已婚' }, { value: 1, label: '未婚' }],
            merryType: 0,
            // credit  信用卡信息
            creditlimit: '',
            creditnum: '',
            creditTypeGroups: [{ value: 0, label: '优秀' }, { value: 1, label: '良好' }, { value: 2, label: '差' }],
            creditType: 0,
            overTypeGroups: [{ value: 0, label: '有' }, { value: 1, label: '无' }],
            overType: 0,
            // insurance 保单信息
            insurancelimit: '',
            insurancecompany: '',
            insurancenum: '',
            insurancenperson: '',
            paymentTypeGroups: [{ value: 0, label: '3年' }, { value: 1, label: '5年' }, { value: 2, label: '10年' }, { value: 3, label: '其他' }],
            paymentType: 0,
            //operate  经营信息
            operatecopname: '',
            natureTypeGroups: [{ value: 0, label: '企业主' }, { value: 1, label: '企业职员' }, { value: 2, label: '个体户' }, { value: 3, label: '自由职业' }],
            natureType: 0,
            operatebank: '',
            //job
            wagesTypeGroups: [{ value: 0, label: '打卡' }, { value: 1, label: '现金' }],
            wagesType: 0,
            monthsalary: '',
            // house
            houseaddress: '',
            housenatureTypeGroups: [{ value: 0, label: '全款' }, { value: 1, label: '按揭' }],
            housenatureType: 0,
            houseworth: '',
            housearea: '',
            houseTypeGroups: [{ value: 0, label: '有房' }, { value: 1, label: '无房' }],
            houseType: 0,
            mortgageTypeGroups: [{ value: 0, label: '一押' }, { value: 1, label: '二押' }],
            mortgageType: 0,
            houseMortgageMoney: '',
            // car
            carnum: '',
            carbrand: '',
            caryear: '',
            carkilomet: '',
            carprice: '',
        }
    }

    componentDidMount() {

    }
    async beforeSubmit() {
        for (let item of this.valids) {
            if (!item.func(this.state[item.key])) {
                return;
            }
        }

        let body = {
            productId: util.getQuery().id,
            salePhone: util.getQuery().phone,
            applySource: 1,
            // professional  个人信息
            name: this.state.name,
            age: this.state.age,
            phone: this.state.tellphone,
            marry: this.state.merryType,
            // credit  信用卡信息
            creditCardTotal: this.state.creditlimit,
            creditCardCount: this.state.creditnum,
            credit: this.state.creditType,
            isCredit: this.state.overType,
            // insurance
            guaranteeTotal: this.state.insurancelimit,
            guaranteeCompany: this.state.insurancecompany,
            guaranteeNumber: this.state.insurancenum,
            guaranteeUser: this.state.insurancenperson,
            guaranteePay: this.state.paymentType,
            //operate
            company: this.state.operatecopname,
            professional: this.state.natureType,
            bankStatement: this.state.operatebank,
            //job
            salarySource: this.state.wagesType,
            salary: this.state.monthsalary,
            // house
            houseAddress: this.state.houseaddress,
            housePay: this.state.housenatureType,
            housePrice: this.state.houseworth,
            houseArea: this.state.housearea,
            houseType: this.state.houseType,
            houseMortgage: this.state.mortgageType,
            houseMortgageMoney: this.state.houseMortgageMoney,
            // car
            carNumber: this.state.carnum,
            carBrand: this.state.carbrand,
            carYear: this.state.caryear,
            carKm: this.state.carkilomet,
            carPrice: this.state.carprice,
        }
        let res = await util.rjax({
            url: '/otherProductApply/insertUser',
            type: "POST",
            data: body
        }).catch((e) => {
            layer.open({
                content: '您填写的数据格式有误',
                btn: "好的"
            })
        })
        if (res) {
            layer.open({
                content: '操作成功',
                btn: "好的"
            })
        }
    }
    // professional  个人信息
    nameChange(e) {
        this.setState({ name: e.target.value })
    }
    ageChange(e) {
        this.setState({ age: e.target.value })
    }
    tellphoneChange(e) {
        this.setState({ tellphone: e.target.value })
    }

    // credit  信用卡信息  
    creditlimitChange(e) {
        this.setState({ creditlimit: e.target.value })
    }
    creditnumChange(e) {
        this.setState({ creditnum: e.target.value })
    }

    // insurance       
    insurancelimitChange(e) {
        this.setState({ insurancelimit: e.target.value })
    }
    insurancecompanyChange(e) {
        this.setState({ insurancecompany: e.target.value })
    }
    insurancenumChange(e) {
        this.setState({ insurancenum: e.target.value })
    }
    insurancenpersonChange(e) {
        this.setState({ insurancenperson: e.target.value })
    }

    //operate 
    operatecopnameChange(e) {
        this.setState({ operatecopname: e.target.value })
    }
    operatecopnameChange(e) {
        this.setState({ operatecopname: e.target.value })
    }
    operatebankChange(e) {
        this.setState({ operatebank: e.target.value })
    }

    //job
    monthsalaryChange(e) {
        this.setState({ monthsalary: e.target.value })
    }

    // house    
    houseaddressChange(e) {
        this.setState({ houseaddress: e.target.value })
    }
    houseworthChange(e) {
        this.setState({ houseworth: e.target.value })
    }
    houseareaChange(e) {
        this.setState({ housearea: e.target.value })
    }
    houseMortgageMoneyChange(e) {
        this.setState({ houseMortgageMoney: e.target.value })
    }

    // car          
    carnumChange(e) {
        this.setState({ carnum: e.target.value })
    }
    carbrandChange(e) {
        this.setState({ carbrand: e.target.value })
    }
    caryearChange(e) {
        this.setState({ caryear: e.target.value })
    }
    carkilometChange(e) {
        this.setState({ carkilomet: e.target.value })
    }
    carpriceChange(e) {
        this.setState({ carprice: e.target.value })
    }

    render() {
        return (

            <div className="declaration">
                <div className="card">
                    <h4>个人信息</h4>
                    <div className="inputbox">
                        <div>
                            <span>姓名</span>
                            <input placeholder="请点击输入" value={this.state.name} onChange={this.nameChange.bind(this)} type="text" />
                        </div>
                        <div>
                            <span>年龄(周岁)</span>
                            <input placeholder="请点击输入" value={this.state.age} onChange={this.ageChange.bind(this)} type="text" />
                        </div>
                        <div>
                            <span>手机号</span>
                            <input placeholder="请点击输入" maxLength="11" value={this.state.tellphone} onChange={this.tellphoneChange.bind(this)} type="text" />
                        </div>
                        <RadioPicker1 title="婚姻状况" groups={this.state.merryTypeGroups} onChange={(val) => { this.setState({ merryType: val }) }} />
                    </div>
                </div>

                <div className="card">
                    <h4>信用卡信息</h4>
                    <div className="inputbox">
                        <div>
                            <span>信用卡总额度(元)</span>
                            <input placeholder="请点击输入" value={this.state.creditlimit} onChange={this.creditlimitChange.bind(this)} type="text" />
                        </div>
                        <div>
                            <span>信用卡数量</span>
                            <input placeholder="请点击输入" value={this.state.creditnum} onChange={this.creditnumChange.bind(this)} type="text" />
                        </div>
                        <RadioPicker1 title='征信情况' groups={this.state.creditTypeGroups} onChange={(val) => { this.setState({ creditType: val }) }} />
                        <RadioPicker1 title="信用卡有无逾期" groups={this.state.overTypeGroups} onChange={(val) => { this.setState({ overType: val }) }} />
                    </div>
                </div>

                <div className="card">
                    <h4>保险信息</h4>
                    <div className="inputbox">
                        <div>
                            <span>保单保额(元)</span>
                            <input placeholder="请点击输入" value={this.state.insurancelimit} onChange={this.insurancelimitChange.bind(this)} type="text" />
                        </div>
                        <div>
                            <span>保险公司</span>
                            <input placeholder="请点击输入" value={this.state.insurancecompany} onChange={this.insurancecompanyChange.bind(this)} type="text" />
                        </div>
                        <div>
                            <span>保单号</span>
                            <input placeholder="请点击输入" value={this.state.insurancenum} onChange={this.insurancenumChange.bind(this)} type="text" />
                        </div>
                        <div>
                            <span>投保人</span>
                            <input placeholder="请点击输入" value={this.state.insurancenperson} onChange={this.insurancenpersonChange.bind(this)} type="text" />
                        </div>
                        <RadioPicker1 title="缴费情况" groups={this.state.paymentTypeGroups} onChange={(val) => { this.setState({ paymentType: val }) }} />
                    </div>
                </div>

                <div className="card">
                    <h4>经营信息</h4>
                    <div className="inputbox">
                        <div>
                            <span>公司名称</span>
                            <input placeholder="请点击输入" value={this.state.operatecopname} onChange={this.operatecopnameChange.bind(this)} type="text" />
                        </div>
                        <RadioPicker1 title="职业性质" groups={this.state.natureTypeGroups} onChange={(val) => { this.setState({ natureType: val }) }} />
                        <div>
                            <span>每月银行流水(元)</span>
                            <input placeholder="请点击输入" value={this.state.operatebank} onChange={this.operatebankChange.bind(this)} type="text" />
                        </div>
                    </div>
                </div>

                <div className="card">
                    <h4>工作信息</h4>
                    <div className="inputbox">
                        <RadioPicker1 title="打卡／现金" groups={this.state.wagesTypeGroups} onChange={(val) => { this.setState({ wagesType: val }) }} />
                        <div>
                            <span>每月收入(元)</span>
                            <input placeholder="请点击输入" value={this.state.monthsalary} onChange={this.monthsalaryChange.bind(this)} type="text" />
                        </div>
                    </div>
                </div>

                <div className="card house">
                    <h4>房产信息</h4>
                    <div className="inputbox">
                        <div>
                            <span>房产地址</span>
                            <input placeholder="请点击输入" value={this.state.houseaddress} onChange={this.houseaddressChange.bind(this)} type="text" />
                        </div>
                        <RadioPicker1 title="按揭／全款" groups={this.state.housenatureTypeGroups} onChange={(val) => { this.setState({ housenatureType: val }) }} />
                        <div>
                            <span>房产价值(万元)</span>
                            <input placeholder="请点击输入" value={this.state.houseworth} onChange={this.houseworthChange.bind(this)} type="text" />
                        </div>
                        <div>
                            <span>面积</span>
                            <input placeholder="请点击输入" value={this.state.housearea} onChange={this.houseareaChange.bind(this)} type="text" />
                        </div>
                        <RadioPicker1 title="房产类型" groups={this.state.houseTypeGroups} onChange={(val) => { this.setState({ houseType: val }) }} />
                        <RadioPicker1 title="抵押类型" groups={this.state.mortgageTypeGroups} onChange={(val) => { this.setState({ mortgageType: val }) }} />
                        <div className="MortgageMoneybox">
                            <input className="houseMortgageMoney" type="text" value={this.state.houseMortgageMoney} onChange={this.houseMortgageMoneyChange.bind(this)} />&nbsp;万元
                       </div>
                    </div>
                </div>

                <div className="card">
                    <h4>车产信息</h4>
                    <div className="inputbox">
                        <div>
                            <span>车牌号</span>
                            <input placeholder="请点击输入" value={this.state.carnum} onChange={this.carnumChange.bind(this)} type="text" />
                        </div>
                        <div>
                            <span>品牌</span>
                            <input placeholder="请点击输入" value={this.state.carbrand} onChange={this.carbrandChange.bind(this)} type="text" />
                        </div>
                        <div>
                            <span>车辆年限</span>
                            <input placeholder="请点击输入" value={this.state.caryear} onChange={this.caryearChange.bind(this)} type="text" />
                        </div>
                        <div>
                            <span>公里数</span>
                            <input placeholder="请点击输入" value={this.state.carkilomet} onChange={this.carkilometChange.bind(this)} type="text" />
                        </div>
                        <div>
                            <span>价格(万元)</span>
                            <input placeholder="请点击输入" value={this.state.carprice} onChange={this.carpriceChange.bind(this)} type="text" />
                        </div>
                    </div>
                </div>
                <input className="loanbtn" onClick={this.beforeSubmit.bind(this)} type="button" value="确定" />
            </div>
        )
    }
}

ReactDom.render(<Declaration />, document.getElementById('app'))